<template>
  <view class="flex-row align-center">
    <view class="flex-row flex-center margin-right-8" :class="{'no-margin':noMargin}" @click="change">
      <image :src="src" :style="{width:size,height:size}" class="l-check-box block" />
    </view>
    <text v-if="label" class="text-t3 text-24" :style="{color,fontSize}" @click="change">{{ label }}</text>
    <slot name="after" />
  </view>
</template>

<script>
export default {
  name: 'LCheckBox',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '36rpx'
    },
    fontSize: {
      type: String,
      default: ''
    },
    type: { // 形状 circle(圆角), square(方形)
      type: String,
      default: 'square'
    },
    noMargin: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      box: 'https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/'
    }
  },
  computed: {
    icon() {
      if (this.type === 'circle') {
        return {
          default: 'check_box_circle.png',
          checked: 'check_box_circle_checked.png'
        }
      }
      return {
        default: 'check_box.svg',
        checked: 'check_box_checked.svg'
      }
    },
    src() {
      return this.value ? this.box + this.icon.checked : this.box + this.icon.default
    }
  },
  methods: {
    change() {
      this.$emit('input', !this.value)
    }
  }
}
</script>

<style scoped lang="scss">
@include setMargin(right,8);

.l-check-box{
  width:36rpx;
  height:36rpx;
}
.no-margin{
  margin:0!important;
}
</style>
